<template>
<el-container>
  <el-header style="height: auto;">
    <el-form :model="form" :rules="formRules">
      <el-row>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label="业务号码" label-width="100px" prop="cardNum">
            <el-input size="small" v-model="form.cardNum" style="width: 100%;" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label="客户查询" label-width="100px" prop="nickName">
            <el-input size="small" v-model="form.nickName" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label="状态" label-width="100px">
            <el-select size="small" v-model="dictStatus" placeholder="状态" style="width: 100%;">
              <el-option v-for="state in dictStatusSelect" :key="state.value" :label="state.label" :value="state.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label="提交时间" label-width="100px">
            <el-date-picker class="select" v-model="insertTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label="处理时间" label-width="100px">
            <el-date-picker class="select" v-model="examineTimeTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 8 }" :lg="{ span: 8 }">
          <el-form-item label-width="50px">
            <el-button size="small" type="primary" @click="currentPage = 0 ; initData()">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-header>
  <el-main style="height: auto;">
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading.fullscreen="" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column prop="nickName" label="所属客户" align="center"></el-table-column>
      <el-table-column prop="cardNum" label="我方业务号码" align="center"></el-table-column>
      <el-table-column prop="dictPayTunnel" label="途径" align="center"></el-table-column>
      <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
      <el-table-column prop="insertTime" label="提交时间" align="center"></el-table-column>
      <el-table-column prop="examineTimeTime" label="处理时间" align="center"></el-table-column>
      <el-table-column prop="price" label="现金" align="center"></el-table-column>
      <el-table-column prop="dictStatus" label="状态" align="center"></el-table-column>
      <el-table-column prop="setMealName" label="套餐" align="center"></el-table-column>
      <el-table-column prop="channelCompayName" label="通道" align="center"></el-table-column>
      <el-table-column prop="cost" label="成本" align="center"></el-table-column>
      <el-table-column prop="totalReturn" label="总返佣" align="center"></el-table-column>
      <el-table-column prop="profit" label="利润" align="center"></el-table-column>
    </el-table>
    <div class="block"><span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :page-count="maxPage" :hide-on-single-page="value" background></el-pagination>
    </div>
  </el-main>
</el-container>
</template>

<script>
import { customerOrder } from '@/api/getData'
import { encryptDes, decryptDes, decrypt } from '@/utils/utils'

export default {
  name: 'Order',
  data() {
    const validateCardNum = (rule, value, callback) => {
      if (value.length > 50) {
        callback(new Error('业务号码不能超过50位'))
      } else {
        callback()
      }
    }
    const validateNickName = (rule, value, callback) => {
      if (value.length > 20) {
        callback(new Error('客户查询不能超过20位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        cardNum: '',
        nickName: ''
      },
      formRules: {
        cardNum: [
          { message: '请填写业务号码', trigger: 'blur' },
          { validator: validateCardNum }
        ],
        nickName: [
          { message: '请填写客户查询', trigger: 'blur' },
          { validator: validateNickName }
        ]
      },
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      value: false,
      cardNum: '',
      nickName: '',
      dictStatus: '',
      dictStatusSelect: [
        {
          value: 'USER_ORDER_WAIT_PAY',
          label: '等待付款'
        },
        {
          value: 'USER_ORDER_HAVE_PAY',
          label: '已经付款'
        }
      ],
      insertTime: '',
      examineTimeTime: '',
      dictPayTunnel: '',
      specifications: '',
      price: '',
      setMealName: '',
      channelCompayName: '',
      cost: '',
      totalReturn: '',
      profit: ''
    }
  },
  created() {
    this.initData()
    //console.log(decryptDes('Isvb+fIQWxy1DfK3ySw8Cyx+NClEZ/uD', 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l']))
  },
  methods: {
    async initData() {
      let startTime = null
      let endTime = null
      if (this.insertTime !== '' && this.insertTime != null) {
        startTime = this.insertTime[0]
        endTime = this.insertTime[1]
      }
      let handleStartTime = null
      let handleEndTime = null
      if (this.examineTimeTime !== '' && this.examineTimeTime != null) {
        handleStartTime = this.examineTimeTime[0]
        handleEndTime = this.examineTimeTime[1]
      }
      const returnData = await customerOrder({
        applyBeginDate: startTime,
        applyEndDate: endTime,
        dealBeginDate: handleStartTime,
        dealEndDate: handleEndTime,
        cardNum: this.cardNum,
        nickName: this.nickName,
        dictStatus: this.dictStatus,
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      },
      {
        obj: this,
        key: 'tableLoading'
      })
      this.tableData = []
      if (returnData._result) {
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.nickName = item.nickName // 所属客户
          obj.cardNum = item.cardNum // 我方业务号码
          obj.dictPayTunnel = item.dictPayTunnel // 途径
          obj.specifications = item.specifications // 规格
          obj.insertTime = item.insertTime // 提交时间
          obj.examineTimeTime = item.examineTimeTime // 处理时间
          obj.price = item.price // 现金
          obj.dictStatus = item.dictStatus // 状态
          obj.setMealName = item.setMealName // 套餐
          obj.channelCompayName = item.channelCompayName // 通道
          obj.cost = item.cost // 成本
          obj.totalReturn = item.totalReturn // 总返佣
          obj.profit = item.profit // 利润
          if (item.dictStatus === 'USER_ORDER_WAIT_PAY') {
            obj.dictStatus = '等待付款'
          } else if (item.dictStatus === 'USER_ORDER_HAVE_PAY') {
            obj.dictStatus = '已经付款'
          }
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 5vh;
    }
    .el-main {
      .block {
        float: right;
      }
      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  .examine /deep/ .el-dialog__body {
    text-align: center;
    font-size: 14px;
    font-family: 微软雅黑;
    line-height: 40px;
    color: #606266;
    font-weight: 700;
  }
  .el-popper[x-placement^=bottom] {
    margin-right: -25px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -25px;
    button {
      display: block;
    }
    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-date-editor .el-range-separator {
    width: 6%;
  }
</style>
